<template>
  <div>
    <!-- 头部 -->
    <headers />

    <!-- nav导航栏 -->
    <div class="nav">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-dem"
        mode="horizontal"
      >
        <el-menu-item>
          <img src="@/assets/logo.png" alt="" />
        </el-menu-item>
        <el-menu-item index="1">
          <router-link to="/home" tag="span">首页</router-link>
        </el-menu-item>
        <el-menu-item index="2">
          <router-link to="/goods" tag="span">全部商品</router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <router-link to="/about" tag="span">关于我们</router-link>
        </el-menu-item>
        <el-menu-item class="el-input">
          <el-input placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-menu-item>
      </el-menu>
      <!-- 轮播图 -->
      <banner />
    </div>
    <div>
      <router-view></router-view>
    </div>

    <!-- 主体区域 -->
    <indexs/>

    <!-- 底部 -->
    <footers></footers>
  </div>
</template>

<script>
import footers from "../components/footer/Footer";
import indexs from "./home/Index";
import headers from "../components/header/Header";
import banner from "../components/banner/Banner";
// import sections from "../components/section/Section";
import listApi from "@/api/index";
export default {
  name: "",
  components: { footers, headers, banner,indexs },
  data() {
    return {
      activeIndex: "1",

      phoneList: [], //手机的数据
      applianceList: [], //家电热门数据
      TVListData: [], //电视数据

      partsList: [], //配件热门数据
      coverListData: [], //保护套数据
      chargerListData: [], //充电器数据

      applianceHotList: [], //家电热门数据
      partsHotList: [], //配件热门数据
      partsActive: 1, //配件分类 1热门  2保护套 3充电器
      applianceActive: 1, //当前选择的分类表示 //热门家电 1:热门数据 2:电视
    };
  },

  created() {
    this.getProduct("phoneList", { categoryName: "手机" });
    this.getProduct("TVListData", { categoryName: "电视机" });
    this.getProduct("coverListData", { categoryName: "保护套" });
    this.getProduct("chargerListData", { categoryName: "充电器" });
    this.getProduct(
      "applianceList",
      { categoryName: ["电视机", "空调", "洗衣机"] },
      true
    );
    this.getProduct(
      "partsList",
      { categoryName: ["保护套", "保护膜", "充电器", "充电宝"] },
      true
    );
    // console.log("applianceActive", this.applianceActive, this.applianceList);
  },
  props: [],
  mounted() {},
  methods: {
    //获取商品列表
    async getProduct(dataName, data, hotFlag) {
      if (hotFlag) {
        var { data: res } = await listApi.getHotProduct(data);
        // console.log(res.Product);
        // this.phoneList = res.Product;
      } else {
        var { data: res } = await listApi.getPromoProduct(data);
        // console.log(res.Product);
        // this.phoneList = res.Product;
      }
      this[dataName] = res.Product;
    },

    applianceMouseOver(e, val) {
      //家电 1热门 2电视
      this.applianceActive = val;
    },
    partsMouseOver(e, val) {
      //配件 1热门  2保护套  3充电器
      this.partsActive = val;
    },
  },
  computed: {},
  watch: {
    applianceActive(val) {
      //当applianceActive发生改变的时候 会触发监听属性
      if (!this.applianceList.length) {
        //如果刚开始applianceList没有内容 则证明没有点击过
        this.applianceList = this.applianceHotList;
      }
      this.applianceHotList = val === 1 ? this.applianceList : this.TVListData;
    },
    partsActive(val) {
      //1 --> 2|3
      //console.log("监听属性", val); //1partsList  2 coverListData  3chargerListData
      if (!this.partsList.length) {
        //如果原始数据源length=0 第一次切换数据
        this.partsList = this.partsHotList;
      }
      let curData = null;
      switch (val) {
        case 1:
          curData = this.partsList;
          break;
        case 2:
          curData = this.coverListData;
          break;
        case 3:
          curData = this.chargerListData;
          break;
      }
      this.partsHotList = curData;
    },
  },
};
</script>

<style lang="scss" scoped>
.nav {
  width: 85%;
  margin: 20px auto;
  .el-menu {
    max-width: 1225px;
    margin: 0 auto;
  }
  .el-input {
    width: 300px;
    margin-left: 200px;
  }
}

.goods_box {
  padding-bottom: 20px;
  background: #f5f5f5;
  .main {
    margin: 0 auto;
    max-width: 1225px;
    .phone {
      background: pink;
      padding: 0;
      margin: 0;
      .box_header {
        margin: 20px 0 0 0;
        height: 58px;
        padding: 0 10px;
        .title {
          display: flex;
          justify-content: space-between;
          font-size: 22px;
          font-weight: 200;
          line-height: 58px;
          color: #333;
        }
        .more {
          float: right;
          a {
            font-size: 16px;
            line-height: 58px;
            color: #424242;
            &:hover {
              color: #ff6700;
            }
          }
          .myMenu li {
            float: left;
            margin-left: 30px;
            &.active,
            &:hover {
              color: #ff6700;
              border-bottom: 2px solid #ff6700;
            }
          }
        }
      }
      .box_body {
        height: 615px;
        display: flex;
        .goods_list {
          height: 615px;
          width: 234px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .list {
          height: 615px;
        }
      }
    }
  }
}
</style>
